<!DOCTYPE html>
<html>
  <head>
	<title>Code Parser</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="styles/default.min.css" rel="stylesheet">
	<link href="css/styles.css" rel="stylesheet">
	<script src="highlight.min.js"></script>
	<script src="languages/matlab.min.js"></script>
	<script src="languages/arduino.min.js"></script>
	<script>
	  var s = window.getSelection();
	  function gen() {
	    res.innerHTML = hljs.highlight(src.value, {language: lang.value}).value;
		cp.innerText = "复制";
	  }
	  function copy() {
		s.removeAllRanges();
		let r = new Range();
		r.selectNodeContents(res);
		s.addRange(r);
		if (document.execCommand('copy'))
		  cp.innerText = "已复制";
	  }
	</script>
	<style>
	  #content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
	</style>
  </head>
  <body>
	<div id="content">
    <tbody>
	  <h1>Code Parser</h1>
    <p>在此粘贴代码：</p>
	<p>
	  <textarea id="src"></textarea>
	</p>
	<p><button onclick="gen();">生成</button>
	<select name="languages" id="lang">
	  <option value="arduino">Select a language</option>
	  <option value="arduino">Arduino</option>
	  <option value="matlab">MATLAB</option>
	  <option value="python">Python</option>
	  <option value="cpp">C++</option>
	  <option value="c">C</option>
	  <option value="java">Java</option>
	  <option value="javascript">JavaScript</option>
	  <option value="php">PHP</option>
	</select>
	</p>
    <button onclick="copy();" id="cp">复制</button>
	<pre><code id="res"></code></pre>
	</tbody>
	<div id="pageFooter"></div>
	</div>
  </body>
</html>		
